<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
    <meta charset="UTF-8">
    <title>日志管理</title>
    <link rel="stylesheet" href="../../static/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../static/css/common.css"/>
</head>
<body style="padding: 20px;">
    <div id="app">
        <div class="search-div">
            <div class="layui-row" style="width: 100%;">
                <div class="search-inline">
                    <input type="text" class="layui-input search-input" v-model="state.username" placeholder="请输入用户名">
                    <input type="text" class="layui-input search-input" v-model="state.description" placeholder="请输入说明">
                    <div id="logType" class="search-input"></div>
                    <button type="button" class="layui-btn layui-btn-sm" @click="getLogs">查询</button>
                </div>
            </div>
        </div>
        <div class="border">
            <table id="log" lay-filter="log"></table>
            <div id="page"></div>
        </div>
    </div>
</body>
<script src="../../static/layui/layui.js"></script>
<script src="../../static/js/xm-select.js"></script>
<script src="../../static/js/axios.js"></script>
<script src="../../static/js/http.js"></script>
<script src="../../static/js/vue3.js"></script>
<script src="../../static/js/common.js"></script>
<script>
    const app = {
      setup(){
        const state = Vue.reactive({
          curr: 1,
          limit: 10,
          total: 0,
          username: '',
          description: '',
          logType: ''
        })

        Vue.onMounted(() => {
            renderType()
            getLogs()
        })

        //  渲染下拉框
        const renderType = () => {
            state.logType = xmSelect.render({
                el: '#logType',
                radio: true,
                clickClose: true,
                size: 'mini',
                model: {
                    icon: 'hidden',
                    label: {
                        type: 'text'
                    }
                },
                data: [
                    {name: '全部', value: ''},
                    {name: '正常', value: '1'},
                    {name: '异常', value: '2'},
                ]
            })
        }

        const getPage = () =>{
            Vue.nextTick(() => {
              const laypage = layui.laypage
              laypage.render({
                elem: 'page',
                count: state.total,
                curr: state.curr,
                limit: state.limit,
                limits: [10, 20, 50, 100, 200, 500, 1000],
                layout: [ 'prev', 'page', 'next', 'count','limit'],
                prev: "<",
                next: ">",
                jump: function (obj, first) {
                  state.curr = obj.curr
                  state.limit = obj.limit
                  if (!first){
                    getLogs()
                  }
                }
              })
            })
        }

        const getLogs = () => {
          const getData = {
              current: state.curr,
              size: state.limit,
              username: state.username,
              description: state.description,
          }
          if (state.logType.getValue('valueStr')){
              getData.logType = state.logType.getValue('valueStr')
          }
          console.log('logType' + state.logType)
          get('/api/sys/log/list', getData).then(res => {
              if (res.success){
                Vue.nextTick(() => {
                  const table = layui.table
                  state.total = res.data.total
                  renderTable(table, res.data.records)
                })
              } else {
                  errorMsg(res.msg)
              }
          })
        }

        const renderTable = (table, data) =>{
            table.render({
                elem: '#log',
                id: 'log_id',
                height: 'full-120',
                limit: state.limit,
                cols: [[
                    {type: '', title: '序号', width: 60, templet: function (d) {
                            return (state.curr - 1) * state.limit + d.LAY_INDEX
                        }},
                    {field: 'username', title: '用户名'},
                    {field: 'description', title: '说明'},
                    {field: 'logType', title: '类型', templet: function(d){
                            if (d.logType === '1'){
                                return '正常'
                            } else if (d.logType === '2'){
                                return '异常'
                            }
                        }},
                    {field: 'method', title: '调用方法'},
                    {field: 'params', title: '参数'},
                    {field: 'ip', title: 'IP'},
                    {field: 'time', title: '耗时(ms)'},
                    {field: 'exceptionDetail', title: '错误信息'},
                    {field: 'createTime', title: '操作时间'},
                ]],
                data: data ? data : [],
                done: function () {
                    getPage()
                }
            })
        }
        return {
          state,
          getLogs
        }
      }
    }
    Vue.createApp(app).mount('#app')
</script>
<style>
.layui-table-view{
    margin-bottom: 0;
    margin-top: 0;
}
.layui-laypage{
    margin-top: 5px;
    margin-bottom: 0;
}

.layui-input{
    height: 30px;
}
</style>
</html>